'use client';

import { useEffect, useState } from 'react';
import Layout from '../components/Layout';
import { useAuth } from '../contexts/AuthContext';

interface UserProfile {
  age?: number;
  gender?: string;
  height?: number;
  weight?: number;
  healthGoal?: string;
}

export default function Dashboard() {
  const { user } = useAuth();
  const [profile, setProfile] = useState<UserProfile | null>(null);

  useEffect(() => {
    // 获取用户详细信息
    if (user) {
      fetch('/api/user/profile')
        .then(res => res.json())
        .then(data => {
          if (data.profile) {
            setProfile(data.profile);
          }
        });
    }
  }, [user]);

  return (
    <Layout>
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold mb-8">个人中心</h1>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="card">
            <h2 className="text-xl font-bold mb-4">个人信息</h2>
            {profile ? (
              <div className="space-y-2">
                <p>年龄: {profile.age || '未设置'}</p>
                <p>性别: {profile.gender || '未设置'}</p>
                <p>身高: {profile.height ? `${profile.height}cm` : '未设置'}</p>
                <p>体重: {profile.weight ? `${profile.weight}kg` : '未设置'}</p>
                <p>健康目标: {profile.healthGoal || '未设置'}</p>
              </div>
            ) : (
              <p>请完善您的个人信息</p>
            )}
          </div>

          <div className="card">
            <h2 className="text-xl font-bold mb-4">快捷操作</h2>
            <div className="space-y-4">
              <button className="btn-primary w-full">
                获取今日饮食建议
              </button>
              <button className="btn-primary w-full">
                记录饮食情况
              </button>
              <button className="btn-primary w-full">
                查看营养分析
              </button>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
} 